<template>
  <div>
    <day_picker
        v-model="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        @change="dateChange"
        placeholder="选择日期">
    </day_picker>
    <div style="float: right">
      <el-button @click="visible=true" type="primary" size="mini" style="margin-right: 10px">
        <svg-icon style="margin-right: 3px;" icon-class="add-circle"/>
        添加
      </el-button>
      <el-button size="mini" style="margin-right: 10px" @click="doOpenMy">
        <svg-icon style="margin-right: 3px;" icon-class="import"/>
        按钮
      </el-button>
      <el-upload
          style="display: inline"
          action="/api/common/upload"
          multiple
          :show-file-list='false'>
        <el-button type="primary" size="mini">
          <svg-icon style="margin-right: 3px;" icon-class="import"/>
          导入
        </el-button>
      </el-upload>
    </div>
    <el-row style="margin-top: 12px">
      <el-col :span="12">
        <el-card shadow='never' style="height: 300px;margin-right: 8px" :traction="true" @doChangeHeight="tableHeight1.current = tableHeight1.stand + $event">
          <span slot="header">
            <span style="font-weight: bold">报警次数统计</span>
            <table-change @change="tableSize1 = $event" style="float: right;"/>
          </span>
          <el-table
              :size="tableSize1"
              :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
              :data="tableData"
              row-key="id"
             :height="tableHeight1.current"
              highlight-current-row
              style="margin-top: -20px">
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="区域名称1"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                prop="count"
                align="right"
                label="报警次数"
                sortable>
            </el-table-column>
            <el-table-column
                prop="count"
                align="right"
                sortable
                label="报警次数">
            </el-table-column>
            <el-table-column
                prop="count"
                align="right"
                sortable
                label="报警次数">
            </el-table-column>
            <el-table-column
                prop="count"
                align="right"
                sortable
                label="报警次数">
            </el-table-column>
            <el-table-column
                prop="count"
                align="right"
                sortable
                label="报警次数">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow='never' style="height: 300px;margin:0px 4px 0px 4px">
          <span slot="header">
            <span style="font-weight: bold">区域报警次数</span>
          </span>
          <div style="height: 340px">
            <echart style="margin-top:-70px;height: 330px" :option="option1"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow='never' style="height: 300px;margin-left:8px">
          <span slot="header">
            <span style="font-weight: bold">区域报警占比</span>
          </span>
          <div style="height: 340px">
            <echart style="margin-top:-70px;height: 330px" :option="option2"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow='never' :style="{height:lastHeight+'px'}" style="margin-top:12px;">
      <span slot="header">
        <span style="font-weight: bold">报警次数统计</span>
        <table-change @change="tableSize2 = $event" style="float: right;"/>
      </span>
      <el-table
          :size="tableSize2"
          :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
          :data="tableData1"
          row-key="id"
          :height="lastHeight-150"
          style="margin-top: -20px"
          highlight-current-row>
        <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            prop="name"
            width="150"
            height="25"
            label="区域名称">
          <template v-slot="{row}">

            <el-link :click-change-color="true" style="margin-left: 5px" type="primary">{{row.name}}</el-link>

          </template>
        </el-table-column>
        <el-table-column
          :render-header="renderHeader"
            prop="name"
            width="150"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader"
            prop="name"
            width="150"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader1"
            prop="name"
            width="150"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader1"
            prop="name"
            width="150"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader1"
            prop="name"
            width="150"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader2"
            width="150"
            prop="name"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader2"
            width="150"
            prop="name"
            label="区域名称">
        </el-table-column>
        <el-table-column
          :render-header="renderHeader2"
            width="150"
            prop="name"
            label="区域名称">
        </el-table-column>
        <el-table-column
            prop="address"
            align="center"
            label="操作">
          <template>
            <el-link :underline="false" style="margin-left: 5px" type="primary">编辑</el-link>
            <span style="margin-left: 5px;color:#CCCCCC">|</span>
            <el-link :underline="false" style="margin-left: 5px" @click="doDel" type="danger">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog width="40%" title="新增" :visible.sync="visible">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门" label-width="120px">
              <el-input clearable :style="{width:inputWidth}" placeholder="请输入部门" size="mini" v-model="form.dept"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提货仓库" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入提货仓库" size="mini" v-model="form.store"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入客户" size="mini" v-model="form.customer"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最终客户" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入最终客户" size="mini" v-model="form.finalCustomer"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户类型" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入客户类型" size="mini" v-model="form.customerType"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务经理" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入业务经理" size="mini" v-model="form.manager"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定价区域" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入定价区域" size="mini" v-model="form.pricingArea"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售政策" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入销售政策" size="mini" v-model="form.salesPolicy"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品分类" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入产品分类" size="mini" v-model="form.productClassification"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同号" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入合同号" size="mini" v-model="form.contractNo"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" label-width="120px">
              <el-input :style="{width:inputWidth}" placeholder="请输入状态" size="mini" v-model="form.state"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期" label-width="120px">
              <day_picker
                  :is-has-button='false'
                  v-model="form.date"
                  :style="{width:inputWidth}"
                  format="yyyy-MM-dd"
                  placeholder="选择日期">
              </day_picker>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" :loading="confirmLoading" type="primary" @click="doConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Print from "@/util/print";
export default {
  name: "demo1",
  data() {
    return {
      tableHeight1: { stand:230,current:230 },
      confirmLoading:false,
      inputWidth:'180px',
      visible: false,
      tableSize1: "",
      tableSize2: '',
      date: '',
      form:{
        dept:'' ,
        store:'' ,
        customer:'' ,
        finalCustomer:'',
        customerType:'',
        manager:'',
        pricingArea:'',
        salesPolicy:'',
        productClassification:'',
        contractNo:'',
        state:'',
        date:''
      },
      tableData1: [
        {
          id: 1,
          name: '竖炉',
        }, {
          id: 2,
          name: '竖炉',
        }, {
          id: 3,
          name: '竖炉',
        }, {
          id: 4,
          name: '竖炉',
        }, {
          id: 5,
          name: '竖炉',
        }, {
          id: 6,
          name: '竖炉',
        }, {
          id: 7,
          name: '竖炉',
        }
      ],
      tableData:
        (function(){
          const arr = []
          const count = 54
          for(let i=1;i<count;i++){
            arr.push({
              id: i,
              name: '竖炉',
              count:i
            })
          }
          return arr
        })(),
      option1: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        legend: {
          x: 'right',
          y: 'top',
          top: '5%',
          data: ['烧结', '竖炉']
        },
        xAxis: {
          type: 'category',
          data: ['06/01', '06/02', '06/03', '06/04', '06/05', '06/06', '06/07']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '烧结',
            showSymbol: false,
            data: [20, 120, 350, 230, 300, 36, 390],
            type: 'line',
            smooth: true
          },
          {
            name: '竖炉',
            showSymbol: false,
            data: [10, 220, 300, 270, 340, 126, 340],
            type: 'line',
            smooth: true
          }
        ]
      },
      option2: {
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        legend: {
          bottom: '15%',
          formatter: (name) => {
            let data = this.option2.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let p = ((tarValue / total) * 100).toFixed(0);
            return name + '\n' + p + '%';
          },
          data: [{
            name: '竖炉',
            icon: 'circle'
          }, {
            name: '烧结',
            icon: 'circle'
          }, {
            name: '其他',
            icon: 'circle'
          }]
        },
        grid: {
          bottom: '40%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: [
              {value: 1048, name: '竖炉'},
              {value: 735, name: '烧结'},
              {value: 580, name: '其他'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    doClickHeadTip(tip){
      console.log(tip);
    },
    renderHeader(h, { column, $index }){
      const attrs = {
        props:{
          underline:true,
          clickChangeColor:true,
          type:'primary',
        }
      }
      return h('el-link',attrs, column.label)
    },
    renderHeader1(h, { column, $index }){
      const attrs = {
        props:{
          underline:false,
          clickChangeColor:true,
          type:'primary',
        }
      }
      return h('el-link',attrs, column.label)
    },
    renderHeader2(h, { column, $index }){
      const attrs = {
        props:{
          underline:true,
          type:'primary',
        }
      }
      return h('el-link',attrs, column.label)
    },
    doOpenMy(){
      this.$notify({
        title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message: '<div @click="$message.success()">这是 <i>HTML</i> 片段</div>'
      });
    },
    doDel() {
      this.$confirm(`您确认删除当前内容吗?<div><span style="font-size: 10px">您已选择1条内容</span></div>`, '', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        this.$message({
          showClose:true,
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    doConfirm(){
      this.confirmLoading = true
      setTimeout(()=>{
        this.$message.success(JSON.stringify(this.form))
        this.confirmLoading = this.visible = false
      },2000)
    },
    print(){
      let el = this.$el;
      Print(el)
      // .toPrint();
    },
    dateChange() {

    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight
    },
    lastHeight() {
      return this.documentHeight - 448
    }
  },
  mounted() {
    this.$initNotices()
  }
}
</script>

<style scoped>

</style>
